window.onload = function () {
    var doc = document
    isShow()
    function isShow() {
        var liArr = doc.querySelectorAll('#box > li')
        var divArr = doc.querySelectorAll('.wrapper .content')
        for (var i = 0; i < liArr.length; i++) {
            liArr[i].index = i;
            liArr[i].onclick = function () {
                for (var j = 0; j < liArr.length; j++) {
                    liArr[j].className = ''
                    divArr[j].className = ''
                }
                divArr[this.index].className = 'show'
                liArr[this.index].className = 'add2line'
            }
        }
    }
    // 当前视窗的宽度
    var WINDOW_OFFSETWIDTH = doc.documentElement.clientWidth
    var liArr = doc.querySelectorAll('#box > li')
    for (var i = 0; i < liArr.length; i++) {
        liArr[i].addEventListener('click', function (e) {
            // 获取当前点击元素的宽度
            var itemWidth = this.offsetWidth
            // 当前事件对象相对移动的距离
            var moveX = e.target.offsetLeft
            // 目标居中的距离 = (当前元素距离左边的相对距离 / 2)+ (视口距离 / 2)
            var left = moveX - (WINDOW_OFFSETWIDTH / 2) + (itemWidth / 2)
            doc.getElementById('box').scrollLeft = left
        })
    }
}


